

import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  TouchableWithoutFeedback,
} from 'react-native';
import styles from './styles';

interface FilterDropdownProps {
  visible: boolean;
  selectedFilters: {
    all: boolean;
    approved: boolean;
    rejected: boolean;
    transferred: boolean;
  };
  onApply: (filters: typeof selectedFilters) => void;
  onClose: () => void;
}

const FilterDropdown: React.FC<FilterDropdownProps> = ({
  visible,
  selectedFilters,
  onApply,
  onClose,
}) => {
  const [localFilters, setLocalFilters] = useState(selectedFilters);

  const handleFilterChange = (key: keyof typeof localFilters) => {
    const newFilters = { ...localFilters };
    
    if (key === 'all') {
      const newValue = !newFilters.all;
      newFilters.all = newValue;
      newFilters.approved = newValue;
      newFilters.rejected = newValue;
      newFilters.transferred = newValue;
    } else {
      newFilters[key] = !newFilters[key];
      newFilters.all = newFilters.approved && newFilters.rejected && newFilters.transferred;
    }
    
    setLocalFilters(newFilters);
  };

  const handleApply = () => {
    onApply(localFilters);
  };

  const handleClose = () => {
    setLocalFilters(selectedFilters);
    onClose();
  };

  const renderFilterItem = (
    key: keyof typeof localFilters,
    label: string,
    disabled = false
  ) => (
    <TouchableOpacity
      key={key}
      style={styles.filterItem}
      onPress={() => handleFilterChange(key)}
      activeOpacity={0.7}
      disabled={disabled}
    >
      <View style={[styles.checkbox, localFilters[key] && styles.checkboxChecked]}>
        {localFilters[key] && <View style={styles.checkmark} />}
      </View>
      <Text style={[styles.filterLabel, disabled && styles.filterLabelDisabled]}>
        {label}
      </Text>
    </TouchableOpacity>
  );

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={handleClose}
    >
      <TouchableWithoutFeedback onPress={handleClose}>
        <View style={styles.overlay}>
          <TouchableWithoutFeedback>
            <View style={styles.dropdownContainer}>
              <View style={styles.header}>
                <Text style={styles.title}>处理结果</Text>
              </View>
              
              <View style={styles.filterList}>
                {renderFilterItem('all', '全部')}
                {renderFilterItem('approved', '已通过')}
                {renderFilterItem('rejected', '已驳回')}
                {renderFilterItem('transferred', '已转办')}
              </View>
              
              <View style={styles.footer}>
                <TouchableOpacity
                  style={styles.applyButton}
                  onPress={handleApply}
                  activeOpacity={0.8}
                >
                  <Text style={styles.applyButtonText}>应用筛选</Text>
                </TouchableOpacity>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

export default FilterDropdown;

